<script setup>
import {ref, reactive, watch, onMounted} from "vue"
import * as api from "../api.js"

const props = defineProps({
    modelValue: {
        type: String,
        default: () => ""
    }
})
const emit = defineEmits(["update:modelValue"])
const state = reactive({
    list: [],
    apiList: [],
    currentGroup: {}
})

/**
 * 删除
 * @param item
 */
const onRemove = (item) => {
    state.list = state.list.filter(str => str !== item)
    onSave()
}

const popover = ref()
/**
 * 保存
 */
const onSave = () => {
    emit("update:modelValue", state.list.join("|"))
    // popover.value.hide()
}
/**
 * 设置列表
 */
const setList = () => {
    state.list = props.modelValue?.split("|").filter(item => item) || []
}

/**
 * 查询接口
 * @returns {Promise<void>}
 */
const getApiList = async () => {
    const {data} = await api.GetSystemApiList()
    state.apiList = data
    console.log(data)
}

const apiList = ref()
/**
 * 设置当前分组
 * @param group
 */
const setCurrentGroup = (group) => {
    state.currentGroup = group
    apiList.value.scrollTop = 0
}

/**
 * 设置api
 * @param item
 */
const setApi = (item) => {
    const permission = item.routeName.replace("api/", "").replace("/", ":")
    const index = state.list.findIndex(str => str === permission)
    if (index < 0) {
        state.list.push(permission)
    } else {
        state.list = state.list.filter(str => str !== permission)
    }
    onSave()
}
/**
 * 已存在
 * @param item
 * @returns {boolean}
 */
const hasApi = (item) => {
    const permission = item.routeName.replace("api/", "").replace("/", ":")
    const index = state.list.findIndex(str => str === permission)
    return index > -1
}

watch(() => props.modelValue, () => {
    setList()
})
onMounted(() => {
    setList()
    getApiList()
})

</script>

<template>
    <div class="PermissionList2">
        <div class="has-list">
            <template v-for="item in state.list" :key="item">
                <el-tag class="permission-tag" closable effect="dark" type="primary" @close="onRemove(item)">{{ item }}</el-tag>
            </template>
        </div>
        <el-popover ref="popover" :width="600" placement="right" title="选择接口权限" trigger="click">
            <template #reference>
                <el-button style="margin-top: 4px;margin-left: 10px" plain size="small" type="warning">{{ state.list.length > 0 ? '修改权限' : '设置权限' }}</el-button>
            </template>
            <template #default>
                <div class="api-list">
                    <div class="group">
                        <div v-for="item in state.apiList" :key="item.name" :class="{active: state.currentGroup.name === item.name}" class="cell" @click="setCurrentGroup(item)">{{ item.name }}</div>
                    </div>
                    <div v-if="state.currentGroup" ref="apiList" class="api">
                        <div v-for="item in state.currentGroup.children" :class="{active: hasApi(item)}" class="cell" @click="setApi(item)">
                            <span>{{ item.displayName }}</span>
                            <span class="sub">{{ item.routeName}}</span>
                        </div>
                    </div>
                </div>
                <!--                <el-button size="small" type="primary" @click="onSave">保存</el-button>-->
            </template>
        </el-popover>
    </div>
</template>

<style lang="scss" scoped>
.PermissionList2 {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    .has-list {
        width: calc(100% - 80px);
    }
    .permission-tag {
        margin-right: 10px;
        margin-bottom: 6px;
    }
}

.api-list {
    width: 100%;
    height: 300px;
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    border: 1px dashed #ccc;

    .group {
        width: 140px;
        height: 100%;
        overflow: auto;

        .cell {
            padding: 4px 10px;
            cursor: pointer;
            &:active {
                opacity: 0.8;
            }
        }

        .active {
            background: var(--el-color-primary-light-9);
            color: var(--el-color-primary);
            font-weight: bold;
        }
    }

    .api {
        width: calc(100% - 140px);
        height: 100%;
        overflow: auto;

        .cell {
            min-height: 36px;
            padding: 6px 10px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            border-bottom: 1px solid #e9e9e9;
            .sub {
                font-size: 12px;
            }
            &:active {
                opacity: 0.8;
            }
        }

        .active {
            //background: var(--el-color-primary-light-9);
            color: var(--el-color-primary);
            font-weight: bold;
            .sub {
                font-weight: normal;
            }
        }
    }
}

</style>